<template>
	<view class="flex-col page">
		<u-navbar title="首页" leftIcon=" " :autoBack="true" bgColor="#fff" placeholder="true"></u-navbar>
		<view class="flex-col section">
			<view class="flex-row justify-between items-center section_2 mt-9">
				<view class="flex-row items-center">
					<view class="flex-row items-center" @click="area">
						<text class="font_2 text">{{area_name}}</text>
						<image class="ml-6 shrink-0 image_3"
							src="https://www.dlxx.top/static/images/7a71e3275cbc79f4b647a58d02925fd0.png" />
					</view>
					<view class="section_3"></view>
					<view class="flex-row items-center group">
						<image class="shrink-0 image_2"
							src="https://www.dlxx.top/static/images/78cf7c7286f57276e4c7ff2ca29e4692.png" />
						<u--input placeholder="请输入产品名称" border="none" v-model="keyword"
							customStyle="padding:0;margin:0 10rpx;width:300rpx;"></u--input>
					</view>
				</view>
				<view class="flex-col justify-start items-center text-wrapper" @click="search">
					<text class="font_2 text text_3">搜索</text>
				</view>
			</view>
		</view>
		<view class="flex-col section_4" v-if="1">
			<view class="flex-row justify-between group_4 group_4s" style="padding: 0;">
				<view class="flex-row justify-between items-center tips">
					<text class="font_2s">行情仅供参考</text>
					<text class="font_2s">本站非交易平台</text>
				</view>
			</view>
			<view class="flex-row justify-between group_4 group_4s">
				<view class="flex-row">
					<image class="shrink-0 image_4"
						src="https://www.dlxx.top/static/images/8633e1df6b4a7afbfc6013c37c5deeb4.png" />
					<text class="ml-8 font text text_4">今日行情</text>
				</view>
				<text class="font_3 text text_5">{{today}}</text>
			</view>
			<view class="flex-row group_4">
				<text class="font_4 text text_6">品牌</text>
				<text class="font_4 text text_7">参考价格</text>
				<text class="font_4 text text_8">涨跌幅</text>
			</view>
			<view class="flex-row group_4" v-for="(item, index) in list" :key="index" @click="detail(item)">
				<text class="font_2 text_6 u-line-1">{{item.name}}</text>
				<text class="font_6 text_7" v-if="item.type == 1">{{item.hq_price}}</text>
				<text class="font_7 text_7" v-if="item.type == 2">{{item.hq_price}}</text>
				<view class="flex-row items-center group_7">
					<image class="image_5" v-if="item.type == 1"
						src="https://www.dlxx.top/static/images/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
					<image class="image_7" v-if="item.type == 2"
						src="https://www.dlxx.top/static/images/b8648e7e42bc7f1191ac8107348f7064.png" />
					<text class="font_6" v-if="item.type == 1">{{item.fd}}</text>
					<text class="font_7" v-if="item.type == 2">{{item.fd}}</text>
				</view>
				<view class="flex-row items-center group_6">
					<text class="font_5 text">历史行情</text>
					<image class="image_6 ml-7"
						src="https://www.dlxx.top/static/images/649c969947935627670d26a01762a47d.png" />
				</view>
			</view>
			<view class="flex-row justify-center items-center group_4 group_4s" v-if="userInfo.group_id == 1"
				@click="more">
				<text class="font_6">查看更多</text>
			</view>
			<view class="flex-col justify-center items-center mt-16">
				<text class="font_4s">购买会员可查看所有行情，联系客服可加入交流群（进入德莱联盟）</text>
				<text class="font_4s">欢迎加入德莱联盟，共同拿捏口粮，邀好友获50%佣金返利</text>
			</view>
		</view>

		<view class="flex-col justify-center items-center section_4_login" v-if="show_login">
			<view class="btn_1" @click="$util.redirectTo('/pages/my/my')">
				登录后查看详情
			</view>

			<text class="font_8 mt-16" @click="show_login = false">下次再说</text>
		</view>

		<view class="flex-col justify-center items-center section_4_login" v-if="show_level">
			<text style="font-size: 32rpx;font-weight: bold;color: #333333;margin-bottom: 20rpx;">购买会员卡</text>
			<text
				style="font-size: 26rpx;font-weight: bold;color: #c4c4c4;margin-bottom: 40rpx;">购买后可兑换会员服务查看全国各地域详细信息</text>
			<view class="flex-row justify-between items-center" style="width: 400rpx;">
				<view class="btn_2" @click="buy(1)">
					月卡{{yueka_money}}
				</view>
				<view class="btn_2" @click="buy(2)">
					年卡{{nianka_money}}
				</view>
			</view>
			<text class="font_8 mt-16" @click="show_level = false">下次再说</text>
		</view>

		<view class="flex-col justify-center items-center share" @click="$util.redirectTo('/pages/my/yq')">
			<text style="font-size: 22rpx;color: #fff;">分享</text>
			<text style="font-size: 22rpx;color: #fff;">有礼</text>
			<!-- <image class="image_9" src="https://www.dlxx.top/static/images/share.png"></image> -->
		</view>

		<view class="flex-col justify-center items-center kefu">
			<button class="flex-col justify-center items-center kf-button" open-type="contact">
				<text style="font-size: 26rpx;color: #fff;">客服</text>
				<!-- <image class="image_9" src="https://www.dlxx.top/static/images/kefu.png"></image> -->
			</button>
		</view>

		<view class="flex-col justify-start relative section_5">
			<view class="flex-row equal-division">
				<view class="flex-col items-center group_26 equal-division-item"
					@click="$util.redirectTo('/pages/index/index', {}, 'reLaunch')">
					<image class="image_8"
						src="https://www.dlxx.top/static/images/08dbdfab3c0c70242c6e3736e46dff22.png" />
					<text class="font_3 text text_9 mt-2-5">首页</text>
				</view>
				<view class="flex-col items-center group_26 equal-division-item"
					@click="$util.redirectTo('/pages/news/index', {}, 'reLaunch')">
					<image class="image_8"
						src="https://www.dlxx.top/static/images/971ed7476151f1358a4fff73ca59b2b9.png" />
					<text class="font_3 text text_10 mt-3-5">行业资讯</text>
				</view>
				<view class="flex-col items-center group_26 equal-division-item"
					@click="$util.redirectTo('/pages/my/my', {}, 'reLaunch')">
					<image class="image_8"
						src="https://www.dlxx.top/static/images/84943266c3f83a62a912caeb9578969d.png" />
					<text class="font_3 text text_11 mt-3-5">我的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				today: '',
				keyword: '',
				userInfo: '',
				list: [],
				area_id: 0,
				area_name: '全国',
				show_list: false,
				show_level: false,
				show_login: false,
				yueka_money: '',
				nianka_money: '',
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载数据中'
			})
			setTimeout(() => {
				this.getUserInfo();
				// this.getList();

			}, 1000);


			var Dates = new Date();
			this.today =
				`${Dates.getFullYear()}-${String(Dates.getMonth() + 1).padStart(2, '0')}-${String(Dates.getDate()).padStart(2, '0')}`;


			var area_id = uni.getStorageSync('area_id');
			if (area_id > 0) this.area_id = area_id;
			var area_name = uni.getStorageSync('area_name');
			if (area_name != '全国' && area_name) this.area_name = area_name;


			this.getGroupInfo();
		},
		onShow() {
			var area_id = uni.getStorageSync('area_id');
			if (area_id != '') this.area_id = area_id;
			var area_name = uni.getStorageSync('area_name');
			if (area_name != '') this.area_name = area_name;

			this.getList();
		},
		methods: {
			buy(type) {
				uni.showLoading({
					title: '提交订单中'
				})
				this.$api.sendRequest({
					url: '/api/index/createOrder',
					data: {
						type: type,
						user_id: this.userInfo.id
					},
					success: res => {
						if (res.code == 1) {
							uni.showLoading({
								title: '请求支付中'
							})
							var payData = res.data;
							this.pay(payData)
						} else {
							this.$util.showToast({
								title: '创建订单失败,请重试'
							});
						}
					}
				});
			},
			pay(payData) {
				var that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp ?
						payData.timeStamp : payData
						.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						console.log(res)
						uni.hideLoading();
						if (res.errMsg == 'requestPayment:ok') {
							that.$util.showToast({
								title: '支付成功'
							});
							that.show_level = false;
							that.getUserInfo();
						} else {
							console.log(res)
							that.$util.showToast({
								title: '支付失败'
							});
						}
					},
					fail: function(err) {
						uni.hideLoading();
						that.$util.showToast({
							title: '支付失败'
						});
					}
				});
			},
			area() {
				this.$util.redirectTo('/pages/index/area');
			},
			search() {
				this.userInfo = uni.getStorageSync('userInfo');
				if (this.userInfo.mobile) {
					if (this.userInfo.group_id == 2) {
						this.show_list = true;
					} else {
						this.show_level = true;
						return true;
					}
				} else {
					this.show_login = true;
					return true;
				}
				this.getList();
			},
			getList() {
				this.userInfo = uni.getStorageSync('userInfo');
				// if (this.userInfo.group_id == 1) return true;

				this.$api.sendRequest({
					url: '/api/index/getYanList',
					data: {
						keyword: this.keyword,
						area: this.area_id,
						user_id: this.userInfo.id,
					},
					success: res => {
						uni.hideLoading();
						console.log(res.data)
						if (res.code == 1) {
							this.list = res.data;
						}
					}
				});
			},
			getGroupInfo() {
				this.$api.sendRequest({
					url: '/api/index/getGroupInfo',
					data: {},
					success: res => {
						if (res.code == 1) {
							this.yueka_money = res.data.yueka_money;
							this.nianka_money = res.data.nianka_money;
						}
					}
				});
			},
			detail(item) {

				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id + '&title=' + item.name
				})
			},
			more() {
				this.userInfo = uni.getStorageSync('userInfo');
				if (this.userInfo.mobile) {
					if (this.userInfo.group_id == 2) {
						this.show_list = true;
					} else {
						this.show_level = true;
						return true;
					}
				} else {
					this.show_login = true;
					return true;
				}
			},
			getUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo');
				this.$api.sendRequest({
					url: '/api/member/info',
					data: {
						user_id: this.userInfo.id
					},
					success: res => {
						if (res.code == 1) {
							uni.setStorageSync('userInfo', res.data);
							this.userInfo = res.data;
						}
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.share {
		position: absolute;
		right: 30rpx;
		bottom: 320rpx;
		background-color: #00806b;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.kefu {
		position: absolute;
		right: 30rpx;
		bottom: 200rpx;
		background-color: #00806b;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.kf-button::after {
		border: 0 !important;
	}

	.kf-button {
		background: none !important;
		margin: 0 !important;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.ml-31 {
		margin-left: 62rpx;
	}

	.ml-28-5 {
		margin-left: 57rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-2-5 {
		margin-top: 5rpx;
	}

	.mt-3-5 {
		margin-top: 7rpx;
	}

	.mt-16 {
		margin-top: 32rpx;
	}

	.page {
		background-color: #f5f5f5;
		height: 100vh;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;

		.font_8 {
			color: #999999;
			font-size: 22rpx;
		}

		.section {
			padding: 34rpx 10rpx 19rpx 19rpx;
			background-color: #ffffff;

			.image {
				margin-left: 47rpx;
				width: 674rpx;
				height: 141rpx;
			}

			.section_2 {
				margin-right: 10rpx;
				padding: 4rpx 6rpx 4rpx 23rpx;
				background-color: #ffffff;
				border-radius: 34rpx;
				border-left: solid 1rpx #00806b;
				border-right: solid 1rpx #00806b;
				border-top: solid 1rpx #00806b;
				border-bottom: solid 1rpx #00806b;

				.image_3 {
					width: 16rpx;
					height: 10rpx;
				}

				.section_3 {
					margin-left: 30rpx;
					background-color: #edeff0;
					width: 3rpx;
					height: 34rpx;
					border-left: solid 1rpx #edeff0;
					border-right: solid 1rpx #edeff0;
					border-top: solid 1rpx #edeff0;
					border-bottom: solid 1rpx #edeff0;
				}

				.group {
					padding: 0 23rpx;

					.image_2 {
						width: 31rpx;
						height: 30rpx;
					}

					.text_2 {
						color: #999999;
					}
				}

				.text-wrapper {
					padding: 18rpx 0;
					background-color: #00806b;
					border-radius: 29rpx;
					width: 128rpx;
					height: 58rpx;

					.text_3 {
						color: #ffffff;
					}
				}
			}
		}

		.section_4_login {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			width: 600rpx;
			height: 440rpx;
			margin: 20rpx;
			padding: 32rpx;
			margin: auto;
			box-shadow: 2rpx 2rpx 2rpx 2rpx #0000001a;
			border-radius: 20rpx;

			.btn_1 {
				width: 380rpx;
				height: 80rpx;
				background-color: #00806b;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 40rpx;
			}

			.btn_2 {
				width: 180rpx;
				height: 60rpx;
				background-color: #00806b;
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				border-radius: 30rpx;
			}
		}

		.section_4 {
			margin: 20rpx;
			padding: 32rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 200rpx;
			min-height: 400rpx;

			.group_4 {
				margin-top: 12rpx;
				padding: 24rpx 6rpx;
				border-bottom: solid 3rpx #eeeeee;

				.image_4 {
					width: 28rpx;
					height: 28rpx;
				}

				.text_4 {
					color: #011613;
				}

				.text_5 {
					color: #9b9b9b;
					line-height: 20rpx;
				}

				.font_4 {
					font-size: 22rpx;
					font-family: PingFangSC;
					line-height: 22rpx;
					color: #999999;
				}

				.text_6 {
					width: 40%;
				}

				.text_7 {
					width: 20%;
				}

				.text_8 {
					width: 20%;
				}

				.group_7 {
					width: 20%;
				}

				.group_6 {
					width: 20%;
				}

				.font_7 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 24rpx;
					color: #b01431;
				}

				.image_7 {
					width: 10rpx;
					height: 24rpx;
					margin-right: 14rpx;
					margin-left: -6rpx;
				}


			}

			.group_4s {
				margin-top: 0;

				.tips {
					width: 100%;
					height: 50rpx;
					padding: 0 20rpx;
					background-color: #00806b;
					color: #fff;
					border-radius: 16rpx 16rpx 0 0;

				}
			}

			.group_22 {
				padding: 26rpx 2rpx 20rpx;
				border-top: solid 3rpx #eeeeee;
				border-bottom: solid 3rpx #eeeeee;

				.group_23 {
					margin-right: 4rpx;

					.group_24 {
						margin-left: 60rpx;
					}

					.group_25 {
						margin-left: 54rpx;
					}
				}
			}

			.font_6 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 24rpx;
				color: #00806b;
			}

			.image_5 {
				width: 10rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			.font_5 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 24rpx;
				color: #00806b;
			}

			.image_6 {
				width: 10rpx;
				height: 18rpx;
			}
		}

		.font {
			font-size: 28rpx;
			font-family: PingFangSC;
			line-height: 26rpx;
		}

		.text {
			text-transform: uppercase;
		}

		.font_2 {
			font-size: 24rpx;
			font-family: PingFangSC;
			line-height: 24rpx;
			color: #011613;
		}

		.font_2s {
			font-size: 24rpx;
			font-family: PingFangSC;
			line-height: 24rpx;
			color: #fff;
		}

		.font_4s {
			font-size: 24rpx;
			font-family: PingFangSC;
			line-height: 24rpx;
			color: #999999;
		}

		.section_5 {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: 45rpx;
			background-image: url('https://www.dlxx.top/static/images/0d7b8433face4c26f310aaff3feab4ca.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.equal-division {
				padding-top: 6rpx;

				.group_26 {
					flex: 1 1 250rpx;

					.image_8 {
						width: 48rpx;
						height: 48rpx;
					}

					.text_9 {
						color: #00806b;
						line-height: 20rpx;
					}

					.text_10 {
						line-height: 20rpx;
					}

					.text_11 {
						line-height: 20rpx;
					}
				}

				.equal-division-item {
					padding: 12rpx 0 12rpx;
				}
			}
		}

		.font_3 {
			font-size: 20rpx;
			font-family: PingFangSC;
			line-height: 19rpx;
			color: #011613;
		}

		.image_9 {
			width: 44rpx;
			height: 44rpx;
		}
	}
</style>